<template>
  <!-- 主体内容部分开始 -->
  <div class="content">
    <!-- 开头图片部分开始 -->
    <div class="headImage">
      <el-carousel height="700px">
        <el-carousel-item v-for="(item, index) in headImg" :key="index">
          <img :src="item.url" alt width="100%" height="100%" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 开头图片部分结束 -->

    <!-- 中间图片/文字部分开始 -->
    <div class="cenImgWord">
      <!-- 图片开始 -->
      <div class="imgDiv">
        <img :src="imageArr[imageIndex].url" />
      </div>
      <!-- 图片结束 -->

      <!-- 文字开始 -->
      <div class="word">
        <div>
          <div>
            Where we have always known that pets are part of the family!
            <br />Zehuai is a family-owned manufacturer and distributor of quaility products
            Zehuai is a family-owned manufacturer and distributor of quaility products
            Zehuai is a family-owned manufacturer and distributor of quaility products
            Zehuai is a family-owned manufacturer and distributor of quaility products
          </div>
          <button>MORE</button>
        </div>
      </div>
      <!-- 文字结束 -->
    </div>
    <!-- 中间图片/文字部分开始 -->

    <!-- 四个选项按钮部分开始 -->
    <div class="options">

      <!-- 标题部分开始 -->
      <div class="title">WHY CHOOSE US?</div>
      <!-- 标题部分结束 -->

      <!-- 按钮部分包裹层开始 -->
      <div class="btn">
        <img :src="item.url" alt="" v-for="(item, index) in btnImg" :key="index">
      </div>
      <!-- 按钮部分包裹层结束 -->
    </div>
    <!-- 四个选项按钮部分结束 -->

    <!-- 后面小图部分开始 -->
    <div class="middle">
      <div class="centent">
        <!-- 标题开始 -->
        <span>PRODUCT INTRODUCTION</span>
        <!-- 标题结束 -->
        <!-- 按钮开始 -->
        <div class="but">
          <button :class="{ butStyle: butBool }" @click="butFunOne">COWHIDE CLASS</button>
          <button :class="{ butStyle: !butBool }" @click="butFunTwo">NYLON CLASS</button>
        </div>
        <!-- 按钮结束 -->
        <!-- 图片开始 -->
        <div class="images">
          <!-- 包裹层开始 -->
          <div>
            <!-- 卡片区域开始 -->
            <div
              class="imageArr"
              v-for="(item, index) in imageArr"
              :key="index"
              :style="{left: index * 25 + '%'}"
            >
              <img :src="item.url" alt width="100%" height="100%" />
            </div>
            <!-- 卡片区域结束 -->
          </div>
          <!-- 包裹层结束 -->
          <!-- 前进/后退按钮开始 -->
          <button @click="leftBut" v-show="butBoolLeft">＜</button>
          <button @click="rightBut" v-show="butBoolRight">＞</button>
          <!-- 前进/后退按钮结束 -->
        </div>
        <!-- 图片结束 -->
      </div>
    </div>
    <!-- 后面小图部分结束 -->
  </div>
  <!-- 主体内容部分结束 -->
</template>

<style lang="less" scoped>
// 主体内容部分开始
.content {
  // 开头图片部分开始
  .headImage {
    width: 100%;
    height: 700px;
    background-color: red;

    .el-carousel {
      width: 100%;
      height: 100%;
      background-color: royalblue;

      .el-carousel-item {
        img {
          width: 100%;
          height: 100px;
        }
      }
    }
  }
  // 开头图片部分结束

  // 中间图片/文字部分开始
  .cenImgWord {
    width: 100%;
    height: 700px;
    position: relative;

    // 图片开始
    .imgDiv {
      width: 400px;
      height: 400px;
      position: relative;
      top: calc(50% - 200px);
      left: 15%;
      overflow: hidden;
      border-radius: 50px;
      z-index: 2;
      transform-origin: center center;
      transition: all 0.5s;

      img {
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.5s;
      }
    }

    &:hover .imgDiv {
      animation: imgDivAni 5s linear infinite;
    }

    &:hover .imgDiv > img {
      height: 520px;
      animation: imgAni 5s linear infinite;
    }

    @keyframes imgDivAni {
      0% {
        border-radius: 50px;
        transform: rotate(0deg);
      }
      50% {
        border-radius: 150px;
        transform: rotate(180deg);
      }
      100% {
        border-radius: 50px;
        transform: rotate(360deg);
      }
    }

    @keyframes imgAni {
      0% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
      50% {
        transform: translate(-50%, -50%) rotate(180deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
    }

    // 图片结束

    // 文字开始
    .word {
      width: 50%;
      height: 400px;
      background-color: #f8f8f8;
      border-radius: 10px;
      position: absolute;
      top: 30%;
      right: 20%;
      z-index: 1;
      box-sizing: border-box;

      & > div {
        width: 70%;
        height: 80%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        // background-color: white;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(0, -50%);

        & > div {
          color: gray;
          line-height: 40px;
        }

        button {
          width: 100px;
          height: 40px;
          color: white;
          font-size: 15px;
          border: none;
          outline: none;
          border-radius: 10px;
          background-color: #f7982a;
          transition: all 0.5s;

          &:hover {
            background-color: #fff;
            color: #f7982a;
            border: 1px solid #f7982a;
          }
        }
      }
    }
    // 文字结束
  }
  // 中间图片/文字部分结束

  // 四个选项按钮部分开始
  .options {
    width: 100%;
    height: 350px;
    background-image: url("../assets/images/矩形 5412.png");
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    overflow: hidden;

    // 标题部分开始
    .title {
      color: white;
      font-size: 35px;
      margin-top: 150px;
      transition: all 1s;
    }

    &:hover .title {
        margin-top: 60px;
      }

    // 标题部分结束

    // 按钮部分包裹层开始
    .btn {
      width: 70%;
      height: 200px;
      // background-color: yellowgreen;
      margin-left: 15%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 1.5s;

      img:nth-child(2n+1) {
        opacity: 0;
        transition: all 1s;
        transform: translate(100%);
      }

      img:nth-child(2n) {
        opacity: 0;
        transition: all 1s;
        transform: translate(-100%);
      }

      &:hover img {
        opacity: 1;
        transform: translate(0);
      }
    }
    // 按钮部分包裹层结束
  }
  // 四个选项按钮部分结束

  //   后面小图部分开始
  .middle {
    width: 100%;
    height: 700px;
    box-sizing: border-box;
    padding: 5% 10%;
    position: relative;

    .centent {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      // 标题开始
      span {
        font-size: 2rem;
      }
      //   标题结束

      // 按钮开始
      .but {
        button {
          width: 200px;
          height: 40px;
          border: none;
          margin-left: 10px;
          transition: all 0.5s;
          outline: none;
          background-color: white;
          color: sandybrown;
        }

        .butStyle {
          background-color: sandybrown;
          color: white;
        }
      }
      // 按钮结束

      // 图片开始
      .images {
        width: 100%;
        height: 350px;

        // 包裹层开始
        & > div {
          width: 100%;
          height: 100%;
          overflow: hidden;
          position: relative;

          // 卡片区域开始
          & > div {
            width: 25%;
            height: 100%;
            box-sizing: border-box;
            padding: 5px 10px;
            position: absolute;
            top: 0;
            transition: all 0.5s;
          }
          // 卡片区域结束
        }
        // 包裹层结束

        //    前进/后退按钮开始
        button {
          border: none;
          outline: none;
          background-color: transparent;
          font-size: 2.5rem;
          position: absolute;
          top: 57%;
        }

        & > button:nth-child(2) {
          left: 5%;
        }

        & > button:nth-child(3) {
          right: 5%;
        }
        //    前进/后退按钮结束
      }
      // 图片结束
    }
  }
  //   后面小图部分结束
}
// 主体内容部分结束
</style>

<script>
import img_1 from "../assets/images/矩形 2 拷贝313.png";
import img_2 from "../assets/images/123123.png";
import img_3 from "../assets/images/dsadas.png";

import images_1 from "../assets/images/959.png";
import images_2 from "../assets/images/1.png";
import images_3 from "../assets/images/26.png";
import images_4 from "../assets/images/e.png";
import images_5 from "../assets/images/r.png";
import images_6 from "../assets/images/78.png";

import images_7 from "../assets/images/组 249.png";
import images_8 from "../assets/images/组 250.png";
import images_9 from "../assets/images/组 251.png";
import images_10 from "../assets/images/组 252.png";
export default {
  data() {
    return {
      imageIndex: 0,
      btnImg: [
        { url: images_7},
        { url: images_8},
        { url: images_9},
        { url: images_10}
      ],
      headImg: [
        {
          url: img_1,
        },
        {
          url: img_2,
        },
        {
          url: img_3,
        },
      ],
      butBool: true,
      imageArrOne: [
        { url: images_1 },
        { url: images_2 },
        { url: images_3 },
        { url: images_4 },
        { url: images_5 },
        { url: images_6 },
      ],
      imageArrTwo: [
        { url: images_6 },
        { url: images_5 },
        { url: images_4 },
        { url: images_3 },
        { url: images_2 },
        { url: images_1 },
      ],
      imageArr: [],
      butBoolLeft: true,
      butBoolRight: false,
    };
  },
  created() {
    this.imageArr = this.imageArrOne;
  },
  methods: {
    // 左切换按钮开始
    leftBut() {
      if (this.imageIndex < this.imageArr.length) this.imageIndex++;
      let img = document.querySelectorAll(".imageArr");
      if (img[img.length - 1].offsetLeft <= img[0].offsetWidth * 5) {
        this.butBoolLeft = false;
      }
      if (img[img.length - 1].offsetLeft <= img[0].offsetWidth * 4) {
        return (this.butBoolLeft = false);
      }
      this.butBoolRight = true;
      for (let i = 0; i < img.length; i++) {
        let imgLeft = img[i].offsetLeft - img[i].offsetWidth;
        img[i].style.left = imgLeft + "px";
      }
    },
    // 左切换按钮结束

    // 右切换按钮开始
    rightBut() {
      if (this.imageIndex > 0) this.imageIndex--;
      let img = document.querySelectorAll(".imageArr");
      if (img[0].offsetLeft >= img[0].offsetWidth) {
        this.butBoolRight = false;
      }
      if (img[0].offsetLeft >= 0) {
        return (this.butBoolRight = false);
      }
      this.butBoolLeft = true;
      for (let i = 0; i < img.length; i++) {
        let imgLeft = img[i].offsetLeft + img[i].offsetWidth;
        img[i].style.left = imgLeft + "px";
      }
    },
    // 右切换按钮结束

    butFunOne() {
      this.butBool = !this.butBool;
      this.imageArr = this.imageArrOne;
    },
    butFunTwo() {
      this.butBool = !this.butBool;
      this.imageArr = this.imageArrTwo;
    },
  },
};
</script>